<template>
  <div class="demo">
    <div class="demo-title">带搜索框</div>
    <div class="demo-content">
      <Transfer
        v-model:target-keys="targetKeys"
        :data-source="mockData"
        show-search
        :filter-option="filterOption"
        :render="(item) => item.title"
        @change="handleChange"
        @search="handleSearch"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import Transfer from '@sscd/transfer';
  interface MockData {
    key: string;
    title: string;
    description: string;
    chosen: boolean;
  }
  const mockData = ref<MockData[]>([]);
  const targetKeys = ref<string[]>([]);
  const getMock = () => {
    const keys: string[] = [];
    const mData: MockData[] = [];
    for (let i = 0; i < 20; i++) {
      const data = {
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
        chosen: Math.random() * 2 > 1,
      };
      if (data.chosen) {
        keys.push(data.key);
      }
      mData.push(data);
    }
    mockData.value = mData;
    targetKeys.value = keys;
  };
  onMounted(() => getMock());
  const filterOption = (inputValue: string, option: MockData) => {
    return option.description.indexOf(inputValue) > -1;
  };
  const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
    console.log(keys, direction, moveKeys);
  };
  const handleSearch = (dir: string, value: string) => {
    console.log('search:', dir, value);
  };
</script>
